<template>
  <div class="index">

    <div class="cons" v-loading="loading">
      <el-collapse accordion @change="handleChange">
        <el-collapse-item v-for="item in list" :key="item.nu_id" :name="item.nu_id"
          v-bind:class="[item.status == 1 ? 'act' : 'no']">
          <template slot="title">
            <div :class="item.is_yidu == 2?'td huise':'td'" style="flex: 6;">
              <i v-if="item.is_yidu == 1 && item.type == 2" class="el-icon-warning"
                style=" font-size: 16px; color:#FF5353;"></i>
              <i v-if="item.is_yidu == 2 && item.type == 2" class="el-icon-warning"
                style=" font-size: 16px; color:#999;"></i>
              <span v-if="item.type == 4">【商品上下架通知】</span>
              <span v-if="item.type == 5">【商品上下架通知】</span>
              <span v-if="item.type == 1">【重要公告】</span>
              <span v-if="item.type == 2">【消息】</span>
              <span v-if="item.type == 3 || item.type == 8">【系统更新】</span>
              <span>{{item.title}}</span>
            </div>
            <div class="td" style="flex: 1;">{{item.nu_time}}</div>
            <div class="td" style="flex: 1;">来源:{{item.name}}</div>
          </template>
          <div v-if="item.content == ''" v-html="item.title"></div>
          <div v-if="item.content != ''" v-html="item.content"></div>
          <div style="cursor: pointer; color: #409EFF;" v-if="item.file != '' && item.file != null"
            @click="down(item.file)">
            下载附件
          </div>
        </el-collapse-item>
      </el-collapse>
      <div style="margin: 20px 0; justify-content: flex-end;" class="kflex">
        <el-button type="primary"  size="mini" circle icon="el-icon-arrow-left" @click="shangyiye" :disabled="page == 1"></el-button>

        <el-button type="primary" size="mini" circle :disabled="list.length < 20"><i class="el-icon-arrow-right el-icon--right"  @click="xiayiye"></i></el-button>
      </div>


      <!-- <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye"
        :page-size="pagesize" :total="total"></el-pagination> -->
    </div>
  </div>
</template>

<script>
  import bus from '@/assets/bus.js'
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot
    },
    name: 'fabutongzhi',
    data() {
      return {
        list: [],
        total: 0,
        pagesize: 20,
        page: 1,
        type:3,//type传1：查出来的是type为3和8的；type传2：查出来的是type为9的；type传3：查出来的是type为1和2的；
        loading: true,
        shopid: ""
      }
    },
    created() {
      this.getlist()
      var that = this
      bus.$on('shopid', (res) => {
        this.shopid = res
      })
    },
    methods: {
      shangyiye:function(){
        if(this.page > 1){
          this.page = this.page - 1
        }
        this.getlist()
      },
      xiayiye:function(){
        if(this.list.length == 20){
          this.page = this.page + 1
        }
        this.getlist()
      },
      down: function(url) {
        const a = document.createElement('a');
        a.setAttribute('download', "");
        a.setAttribute('href', url);
        a.click();
      },
      handleChange: function(e) {
        axios.post('/api/sys/notice/set/read', {
            id: e
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      getlist: function() {
        this.danxuans = [];
        this.quanxuana = false
        var that = this
        axios.get('/api/system/notice/center?page=' + this.page + '&page_size=' + this.pagesize + '&type=' + this.type)
          .then(response => {
            if (response.data.msg.code == 0) {
              that.list = response.data.data.data
              that.total = response.data.data.total
              that.loading = false
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.page = page
        this.getlist()
      },
      status: function(id) {
        var that = this
        axios.post('/api/system/message/status', {
            status: 2,
            id: id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              that.$message({
                message: '修改状态成功！',
                type: 'success'
              });
              that.getlist()
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .index {
    /deep/ .el-icon--right{ margin-left: 0;}
    /deep/ .el-collapse-item__header {
      height: auto;
    }

    .cons {
      /deep/ .el-collapse-item__content {
        background: #f1f1f1;
        padding: 10px 20px;
      }
    }

    .huise {
      color: #999;
    }

    .cons {

      background: #fff;
      padding: 0 20px;

      /deep/ .el-pagination {
        text-align: right;
        margin: 20px 0
      }

      .act {
        color: #000;

        /deep/ .el-icon-message-solid {
          color: #EEF7FF
        }
      }

      .no {
        color: #999;
      }
    }

  }
</style>
